import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Button, Checkbox } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { connect } from 'umi';
import { GForm } from '@/components';
import styles from './style.less';
import store from 'store';

const Login = props => {
  const { submitting } = props;
  const formRef = useRef();
  const [remenber, setRemenber] = useState(true);

  const handleSubmit = (values) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: values,
    }).then(({ code, data, msg }) => {
      if (remenber) {
        store.set('accountInfo', values);
      } else {
        store.set('accountInfo', null);
      }
    });
  };

  const remenberMe = (e) => {
    setRemenber(e.target.checked);
  }

  useEffect(() => {
    formRef.current.setFieldsValue(store.get('accountInfo') || {});
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.title}>大箴科技管理系统</div>
        <div className={styles.login}>
          <h2>登录你的帐号</h2>
          <div className={styles.main}>
            <GForm
              ref={formRef}
              submitCall={handleSubmit}
              initialValues={{ username: '13900000001', password: '123456' }}
              formSet={[{
                type: 'input',
                dataIndex: 'username',
                validOptions: {
                  rules: [{
                    required: true,
                    message: '不能为空',
                  },]
                },
                props: {
                  prefix: <UserOutlined />,
                  className: "loginInput",
                  size: 'large'
                }
              }, {
                type: 'password',
                dataIndex: 'password',
                validOptions: {
                  rules: [{
                    required: true,
                    message: '不能为空',
                  },]
                },
                props: {
                  prefix: <LockOutlined />,
                  className: "loginInput",
                  size: 'large'
                }
              }]}
              column={1}
              defaultFooterBar={false}
              labelBasicSpan={0}
              totalSpan={24}
            />
            <Checkbox onChange={remenberMe} checked={remenber} >记住我</Checkbox>
            <Button
              size="large"
              type="primary"
              className="loginBtn"
              loading={submitting}
              onClick={() => {
                formRef.current.submit()
              }}>
              登录
        </Button>

          </div>
        </div>
      </div>
    </div>




  );
};

export default connect(({ login, loading }) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
